<template>
  <div id="panel">
    <template>
      <el-card class="queryForm">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          :label-position="'right'"
        >
          <el-form-item label="点位名称：" prop="segmentname">
            <el-input
              style="width: 150px"
              v-model="queryParams.segmentname"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="点位类型：" prop="segmtype" class="times">
            <el-select
              v-model="queryParams.segmtype"
              placeholder="请选择"
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="item in dict.type.sys_segmenttype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="点位分类：" prop="segmentcategory" class="times">
            <el-select
              style="width: 150px"
              clearable
              v-model="queryParams.segmentcategory"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dict.type.syd_intake_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="控制级别："
            prop="controllevelcode"
            class="times"
          >
            <el-select
              style="width: 150px"
              clearable
              v-model="queryParams.controllevelcode"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dict.type.sys_control_level"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考核类别：" prop="assesstypecode" class="times">
            <el-select
              style="width: 150px"
              clearable
              v-model="queryParams.assesstypecode"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dict.type.sys_assse_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="searchBtnBox">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              style="padding: 10px"
              >查询</el-button
            >
            <el-button @click="resetQuery" style="padding: 10px">
              <i class="iconfont icon-saoba"></i>
              重置
            </el-button>
          </div>
        </el-form>
      </el-card>
      <el-card class="pageContent">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:user:add']"
              >新增</el-button
            >
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="handleUpdate"
              v-hasPermi="['system:user:edit']"
              >修改</el-button
            >
          </el-col> -->
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
              >删除</el-button
            >
          </el-col>

          <!-- <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:user:export']"
              >导出</el-button
            >
          </el-col> -->
        </el-row>
        <el-table
          :data="tableList.rows"
          stripe
          :height="tableHeight"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="segmentname" label="点位名称">
            <template slot-scope="scope">
              <span class="dmmc" @click="showDmxx(scope.row)">{{
                scope.row.segmentname
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="segmtype" label="点位类型">
            <template slot-scope="scope">
              <span>{{
                scope.row.segmtype == 1
                  ? "手动"
                  : scope.row.segmtype == 2
                  ? "自动"
                  : "-"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="autoequipmn" label="自动站设备编号" />
          <el-table-column prop="segmentcategory" label="点位分类">
            <template slot-scope="scope">
              <span>{{
                scope.row.segmentcategory == 1
                  ? "河流"
                  : scope.row.segmentcategory == 2
                  ? "湖库"
                  : scope.row.segmentcategory == 3
                  ? "地下水"
                  : "-"
              }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="province" label="行政区划" /> -->
          <el-table-column prop="controllevelcode" label="控制级别">
            <template slot-scope="scope">
              <span>{{
                scope.row.controllevelcode == 0
                  ? "国控"
                  : scope.row.controllevelcode == 1
                  ? "省控"
                  : scope.row.controllevelcode == 2
                  ? "市控"
                  : "-"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="assesstypecode" label="考核级别">
            <template slot-scope="scope">
              <span>{{
                scope.row.assesstypecode == 0
                  ? "国考"
                  : scope.row.assesstypecode == 1
                  ? "省考"
                  : scope.row.assesstypecode == 2
                  ? "市考"
                  : "-"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="view(scope.row)">查看</el-button> -->
              <el-button type="text" @click="handleUpdate(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination-self"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :pager-count="5"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          layout="slot, total, sizes, prev, pager, next, jumper"
          :total="tableList.total"
        >
          <el-button
            class="refresh-button"
            icon="el-icon-refresh"
            title="刷新"
            @click="getList"
          />
        </el-pagination>
      </el-card>
    </template>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="950px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="170px">
        <div class="titleBox">
          <p class="title">基础信息</p>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="点位名称" prop="segmentname">
              <el-input
                v-model="form.segmentname"
                placeholder="请输入点位名称"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点位别名" prop="segmentalias">
              <el-input
                v-model="form.segmentalias"
                placeholder="请输入点位别名"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="点位编码" prop="segmentcode">
              <el-input
                v-model="form.segmentcode"
                placeholder="请输入点位编码"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监测分类" prop="monitortype">
              <el-select
                v-model="form.monitortype"
                placeholder="请选择监测分类"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.monitor_type_list"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="点位类型" prop="segmtype">
              <el-select
                v-model="form.segmtype"
                placeholder="请选择点位类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.sys_segmenttype"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用状态" prop="lifecycle">
              <el-radio v-model="form.lifecycle" label="1">是</el-radio>
              <el-radio v-model="form.lifecycle" label="0">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行政区划" prop="countycode">
              <el-select
                v-model="form.countycode"
                placeholder="请选择行政区划"
                style="width: 100%"
                @change="
                  formChange($event, 'code', { county: 'name' }, options)
                "
              >
                <el-option
                  v-for="dict in regionList"
                  :key="dict.code"
                  :label="dict.name"
                  :value="dict.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="点位位置" prop="segmaddress">
              <el-input
                v-model="form.segmaddress"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="点位分类" prop="segmentcategory">
              <el-select
                v-model="form.segmentcategory"
                placeholder="请选择点位分类"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.segment_prop"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点位排序" prop="segmentsort">
              <el-input
                v-model="form.segmentsort"
                placeholder="请输入点位排序"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河流名称" prop="riverid">
              <el-select
                v-model="form.riverid"
                placeholder="请选择河流名称"
                style="width: 100%"
                @change="
                  formChange($event, 'id', { rivername: 'label' }, options)
                "
              >
                <el-option
                  v-for="dict in options"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="湖库" prop="lakeid">
              <el-select
                v-model="form.lakeid"
                placeholder="请选择湖库"
                style="width: 100%"
                @change="
                  formChange(
                    $event,
                    'lakecode',
                    { lakename: 'lakename' },
                    lakeList
                  )
                "
              >
                <el-option
                  v-for="dict in lakeList"
                  :key="dict.lakecode"
                  :label="dict.lakename"
                  :value="dict.lakecode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否饮用水源地" prop="isdrink">
              <el-radio v-model="form.isdrink" label="1">是</el-radio>
              <el-radio v-model="form.isdrink" label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="饮用水源地" prop="drinksourcename">
              <el-select
                v-model="form.drinksourceid"
                placeholder="请选择饮用水源地"
                style="width: 100%"
                @change="
                  formChange($event, 'value', { drinksourcename: 'label' }, [])
                "
              >
                <el-option
                  v-for="dict in []"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="自动监测设备编号" prop="autoequipmn">
              <el-input
                v-model="form.autoequipmn"
                placeholder="请输入自动监测设备编号"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="titleBox">
          <p class="title">功能信息</p>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="目标级别" prop="targetlevel">
              <el-select
                v-model="form.targetlevel"
                placeholder="请选择目标级别"
                style="width: 100%"
                @change="
                  formChange(
                    $event,
                    'value',
                    { targetlevelname: 'label' },
                    dict.type.monitor_targetlevel
                  )
                "
              >
                <el-option
                  v-for="dict in dict.type.monitor_targetlevel"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制级别" prop="controllevelcode">
              <el-select
                v-model="form.controllevelcode"
                placeholder="请选择控制级别"
                style="width: 100%"
                @change="
                  formChange(
                    $event,
                    'value',
                    { controllevel: 'label' },
                    dict.type.sys_control_level
                  )
                "
              >
                <el-option
                  v-for="dict in dict.type.sys_control_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考核类别" prop="assesstypecode">
              <el-select
                v-model="form.assesstypecode"
                placeholder="请选择考核类别"
                style="width: 100%"
                @change="
                  formChange(
                    $event,
                    'value',
                    { assesstype: 'label' },
                    dict.type.sys_segmenttype
                  )
                "
              >
                <el-option
                  v-for="dict in dict.type.sys_segmenttype"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否参与城市评价" prop="isevaluate">
              <el-radio v-model="form.isevaluate" label="1">是</el-radio>
              <el-radio v-model="form.isevaluate" label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否城市考核水质指数" prop="iscity">
              <el-radio v-model="form.iscity" label="1">是</el-radio>
              <el-radio v-model="form.iscity" label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否是审核点位" prop="iscountryauto">
              <el-radio v-model="form.iscountryauto" label="1">是</el-radio>
              <el-radio v-model="form.iscountryauto" label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否考核" prop="assessevaluate">
              <el-radio v-model="form.assessevaluate" label="1">是</el-radio>
              <el-radio v-model="form.assessevaluate" label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="干流/支流" prop="streamtype">
              <el-select
                v-model="form.streamtype"
                placeholder="干流/支流"
                style="width: 100%"
              >
                <el-option
                  v-for="item in [
                    { label: '支流', value: '1' },
                    { label: '干流', value: '0' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计算类型" prop="jslx">
              <el-select
                v-model="form.jslx"
                placeholder="请选择计算类型"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in []"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流域名称" prop="basinname">
              <el-select
                v-model="form.basinid"
                placeholder="请选择流域名称"
                style="width: 100%"
                @change="
                  formChange(
                    $event,
                    'value',
                    { basinname: 'label' },
                    basinOptions
                  )
                "
              >
                <el-option
                  v-for="dict in basinOptions"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上下游编码" prop="handsegmentcode">
              <el-input
                v-model="form.handsegmentcode"
                placeholder="请输入上下游编码"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="简介" prop="introduction">
              <el-input
                v-model="form.introduction"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情项 -->
    <el-dialog
      :title="xqTitle"
      :visible.sync="showDetail"
      width="90%"
      append-to-body
    >
      <detail
        :dmid="dmId"
        :dmType="dmType"
        :dmtitle="xqTitle"
        :key="new Date().getTime()"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getDmList,
  deleteDm,
  getBasinSelect,
  segmentAdd,
  segmentEdit,
} from "@/api/dataResources/monitorData/section.js";
import { getRegionList } from "@/api/dataResources/monitorData/region.js";
import { getLakeList } from "@/api/dataResources/monitorData/lake.js";
import { getRiverList } from "@/api/dataResources/monitorData/river.js";
import detail from "./dmOneByOne/index.vue";
export default {
  name: "HydrologicStation",
  dicts: [
    "sys_segmenttype",
    "syd_intake_type",
    "sys_control_level",
    "sys_assse_type",
    "monitor_type_list",
    "water_quality_level",
  ],
  components: {
    detail,
  },
  computed: {},
  data() {
    return {
      tableHeight: window.innerHeight - 450,
      options: [],
      basinOptions: [],
      regionList: [],
      lakeList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        segmentname: "",
        riverName: "",
      },
      tableList: {
        total: 0,
        rows: [],
      },
      dateRange: [],
      // 选中数组
      ids: [],
      // 是否显示新增/修改弹出层
      open: false,
      // 弹出层标题
      title: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        segmentname: [
          { required: true, message: "点位名称不能为空", trigger: "blur" },
        ],
        segmentalias: [
          { required: true, message: "点位别名不能为空", trigger: "blur" },
        ],
        longitude: [
          { required: true, message: "经度不能为空", trigger: "blur" },
        ],
        latitude: [
          { required: true, message: "纬度不能为空", trigger: "blur" },
        ],
        segmentsort: [
          { required: true, message: "点位排序不能为空", trigger: "blur" },
        ],
        isdrink: [
          {
            required: true,
            message: "是否饮用水源地排序不能为空",
            trigger: "blur",
          },
        ],
        targetlevel: [
          { required: true, message: "目标级别不能为空", trigger: "blur" },
        ],
      },

      // 详情弹出层
      showDetail: false,
      // 详情弹框id
      dmId: "",
      // 点位类型（自动/手工）isauto =1的时候是自动站 IsManual=1的时候是手工点位
      dmType: "",
      // 详情titlt
      xqTitle: "",
    };
  },
  watch: {},
  created() {
    this.getsshl();
    this.getssly();
    this.getRegionListFn();
    this.getLakeListFn();
  },
  mounted() {
    this.pageInit();
  },
  methods: {
    formChange(value, key, map, list) {
      let item = list.find((it) => it[key] == value);
      if (item) {
        for (let fkey in map) {
          this.form[fkey] = item[map[fkey]];
          console.log("fkey", fkey, this.form[fkey]);
        }
      }
    },
    //页面初始化请求的数据
    pageInit() {
      this.getList();
    },

    async getLakeListFn() {
      let res = await getLakeList();
      if (res.code == 200) {
        this.lakeList = res.rows;
      }
    },
    async getRegionListFn() {
      let res = await getRegionList();
      if (res.code == 200) {
        this.regionList = res.rows;
      }
    },
    //获取所属河流下拉选项数据
    getsshl() {
      getRiverList().then((response) => {
        console.log(">>>河流", response);

        this.options = response.rows.map((item) => ({
          value: item.id,
          label: item.rivername,
        }));
      });
    },

    // 获取所属流域下拉选项数据
    getssly() {
      getBasinSelect().then((response) => {
        console.log(">>>流域", response);

        this.basinOptions = response.rows.map((item) => ({
          value: item.id,
          label: item.basinname,
        }));
      });
    },
    //表格checkbox选择数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {
        segmentname: "",
        segmentalias: "",
        segmentcode: null,
        monitortype: null,
        ismanual: "",
        isauto: "",
        iscountryauto: null,
        isevaluate: null,
        isdrink: "",
        lifecycle: "",
        segmentcategory: "",
        segmenttype: null,
        rivername: "",
        riverid: "",
        lakename: null,
        lakeid: null,
        drinksourcename: null,
        drinksourceid: null,
        longitude: null,
        latitude: null,
        segmaddress: null,
        verticalazimuth: null,
        horizontalazimuth: null,
        tidetype: null,
        segmentsort: null,
        streamtype: null,
        province: "",
        provincecode: "",
        city: "",
        citycode: "",
        county: "",
        countycode: "",
        townstreets: null,
        townstreetscode: null,
        autoequipmn: null,
        startdate: null,
        enddate: null,
        introduction: null,
        imagesurl: null,
        remark1: null,
        remark2: null,
        remark3: null,
        remark4: null,
        remark5: null,
        remark6: null,
        ismain: null,
        handsegmentcode: null,
        timeremainder: null,
        videourl: null,
        assessevaluate: null,
        controllevelcode: "",
        controllevel: "",
        targetlevel: "",
        targetlevelname: null,
        basinname: null,
        basinid: null,
        assesstypecode: "",
        assesstype: "",
        segmtype: null,
        designatedarea: null,
        iscity: null,
      };
      this.open = true;
      this.title = "添加";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = { ...row };
      this.open = true;
      this.title = "修改用户";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let id;
      if (row) {
        id = row.id;
      } else {
        id = this.ids.join(",");
      }
      this.$modal
        .confirm("是否确认删除点位？")
        .then(function () {
          return deleteDm(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    },
    //搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置、清除表单
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
    },
    // 弹出层取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            segmentEdit(this.form).then((res) => {
              this.open = false;
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          } else {
            segmentAdd(this.form).then((res) => {
              this.open = false;
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    },
    //导出
    handleExport() {},
    // 获取表格数据
    getList() {
      this.ids = [];
      this.loading = true;
      getDmList({ pageNum: 1, pageSize: 999999999 }).then((res) => {
        this.tableList.total = res.total;
        this.tableList.rows = res.rows;
        this.loading = false;
      });
    },

    // 查看点位详情操作
    showDmxx(e) {
      console.log("查看点位详情:", e);
      // this.$router.push({
      //   path: '/dataManage/dmxx',
      //   query: {
      //     id: e.id
      //   }
      // })
      this.xqTitle = e.segmentname;
      this.dmId = e.id;
      // this.dmType = e.isauto;
      this.dmType = e.isauto == 1 ? "isauto" : e.ismanual == 1 ? "ismanul" : "";
      this.showDetail = true;
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  // 控制分页的样式----二次开发
  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  // 控制分页刷新按钮样式
  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    // .el-card__body {
    //   padding-left: 0 !important;
    // }
    .el-form-item {
      margin: 10px 0 10px 10px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .times {
      .el-form-item__content {
        width: 250px;
      }
    }

    .el-form-item__content {
      min-width: 200px;
      // & > div {
      //   width: 100% !important;
      // }
    }

    .searchBtnBox {
      display: inline-block;
      margin: 20px 0 20px 20px;
    }
  }

  .pageContent {
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
  .dmmc {
    font-size: 14px;
    font-weight: bold;
    color: #307eff;
    cursor: pointer;
  }
}
// 左右横排的标题和更多
.titleBox {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe4ed;
  margin: 0 20px 20px 20px;
  position: relative;
  &::before {
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background: #307eff;
  }
  .title {
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 10px;
    font-weight: 500;
  }
  .more {
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
}
</style>
